<template>
  <div class="it-project  dis-flex">
      <div class="left ">
          <div class=" mar-tb-10px">
            <el-button size="mini" type="text" @click="addProject">新建项目</el-button>
            <el-button size="mini" type="text" @click="updateProject">修改</el-button>
          </div>
          <ul class="font-14px">
            <el-tree :data="projectList" :props="{label: 'projectTitle'}" @node-click="handleNodeClick"></el-tree>
          </ul>
      </div>

      <div class="flex-1">
        <el-card class="box-card h-full" >
          <CodeTemplate :project-id="projectId" v-if="projectId"></CodeTemplate>
        </el-card>
      </div>
    <DialogForm :fields="columns" :form-data="formData" v-model="dialogStatus" @submit="newProject"></DialogForm>
  </div>
</template>

<script>
import CodeTemplate from "./CodeTemplate"
import http from "network/http";
import Service from "api/Service";
import ApiResponse from "utils/ApiResponse";
import commons from "utils/commons";
export default {
  name: "ITProject",
  components:{
    CodeTemplate
  },
  data(){
    return {
      projectId: '',
      projectList: [],
      currentProject: null,
      activeIndex: -1 ,
      formData:{} ,
      dialogStatus: false ,
      api:{
        list: `${Service.itToolService}/toolProject/list`,
        add: `${Service.itToolService}/toolProject/saveOrUpdate`,
        update: `${Service.itToolService}/toolProject/saveOrUpdate`,
      }
    }
  },
  mounted() {
    this.getDataList()
  },
  computed:{
    columns(){
      return [
        {
          key: 'projectTitle',
          type: 'input',
          title: '项目名称',
          required: true
        },
        {
          key: 'packageName',
          type: 'input',
          title: '包名称',
          required: true
        },
        {
          key: 'tablePrefix',
          type: 'input',
          title: '表前缀',
        },
        {
          key: 'author',
          type: 'input',
          title: '作者',
        },
        {
          key: 'email',
          type: 'input',
          title: '邮箱',
        },
        {
          title: '开启驼峰命名',
          key: 'mapUnderscoreToCamelCase',
          is: 'switch'
        },
        {
          key: 'desc',
          attrs:{
            type: 'textarea',
          },
          title: '描述',
        },

      ]
    }
  },
  methods:{
    addProject(){
      this.formData = {
        mapUnderscoreToCamelCase: true
      };
      this.dialogStatus = true ;
    },
    updateProject(){
      if(commons.isVoid(this.projectId)){
        this.$message.warning("请选择项目")
        return ;
      }
      this.formData = Object.assign({},this.currentProject);
      this.dialogStatus = true ;
    },
    handleNodeClick(node){
      this.currentProject = node
      this.projectId = node.projectId
    },
    getDataList(){
      http.post(this.api.list , {}).then(res=>{
        ApiResponse.init(res).ok((data)=>{
          this.projectList = data
        })
      })
    },
    newProject(formData){
      if(commons.isVoid(formData.projectId)){
        http.post(this.api.add , formData).then(res=>{
          ApiResponse.init(res).print().ok((data)=>{
            this.getDataList()
          })
        })
      }else{
        http.post(this.api.update , formData).then(res=>{
          ApiResponse.init(res).print().ok((data)=>{
            this.getDataList()
          })
        })
      }
    }
  }
}
</script>

<style scoped>
.left{
  width: 200px;
  height: 70vh;
  overflow: auto;
}
.li-item.active{
  text-decoration: underline;
}
</style>
